<extend name="Public/base" />

<block name="body">
    <form method="POST" id="form1" action="">
        <!-- 标题栏 -->
        <div class="main-title">
            <h2>
                {$title}
            </h2>
        </div>
        <div class="row">
            <div class="col-lg-12 row">
                <div class="col-lg-12 text-center"><span class="text-center text-info" style="font-size: 20px;">报损原因比例图</span></div>
                <div class="col-lg-12 text-center">
                    <label>
                        <canvas id="myChart"   style="width: 80%;height: 260px;"></canvas>
                    </label>
                </div>
                <div class="col-lg-12">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>原因</th>
                            <th>颜色</th>
                            <th>报损数量</th>
                            <th>报损比例</th>
                        </tr>
                        </thead>
                        <volist name="_reasonList" id="vo">
                            <tr>
                                <td>{$vo.reason}</td>
                                <td id="data{$i}">▃▃▃</td>
                                <td>{$vo.reasonCnt}</td>
                                <td>{$vo['reasonCnt']*100/$vo['total']|number_format}%</td>
                            </tr>
                        </volist>
                        <tr style="font-size: 18px;font-weight: 700;border-top: 1px solid black">
                            <td colspan="3">总计</td>
                            <td>{$vo.total}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-lg-12 row">
                <div class="col-lg-12 text-center"><span class="text-center text-info" style="font-size: 20px;">报损方式比例图</span></div>
                <div class="col-lg-12 text-center">
                    <canvas id="myChart2"   style="width: 100%;height: 130px;"></canvas>
                </div>
                <div class="col-lg-12">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>报损方式</th>
                            <th>颜色</th>
                            <th>报损数量</th>
                            <th>报损比例</th>
                        </tr>
                        </thead>
                        <volist name="_typeList" id="vo">
                            <tr>
                                <td>{$vo.loss_type}</td>
                                <td id="typedata{$i}">▃▃▃</td>
                                <td>{$vo.typeCnt}</td>
                                <td>{$vo['typeCnt']*100/$vo['total']|number_format}%</td>
                            </tr>
                        </volist>
                        <tr style="font-size: 18px;font-weight: 700;border-top: 1px solid black">
                            <td colspan="3">总计</td>
                            <td>{$vo.total}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="data-table table-striped">



        </div>

    </form>
</block>

<block name="script">
    <script type="text/javascript" src="__JS__/Chart/Chart.min.js"></script>
    <script type="text/javascript">
        var areaObj={$reasonList};
        var typeObj={$typeList};
        var colorArr=['#F38630','#E0E4CC','#69D2E7','#EEC900','#EE6363','#7EC0EE','#515151','#008B8B','#6495ED','#B03060'];
        var reasonArr=[];
        var typeArr=[];
        for(var i=0;i<areaObj.length;i++){
            $("#"+"data"+String(i+1)).css('color',colorArr[i]);
            var obj = {
                value:areaObj[i]['reasonCnt'],
                color:colorArr[i]
            }
            reasonArr.push(obj);
        }
        for(var i=0;i<typeObj.length;i++){
            $("#"+"typedata"+String(i+1)).css('color',colorArr[i]);
            var obj = {
                value:typeObj[i]['typeCnt'],
                color:colorArr[i]
            }
            typeArr.push(obj);
        }
        var ctx = document.getElementById("myChart").getContext("2d");
        var ctx2 = document.getElementById("myChart2").getContext("2d");
//        var data = [
//            {
//                value: 30,
//                color:"#F38630"
//            },
//            {
//                value : 50,
//                color : "#E0E4CC"
//            },
//            {
//                value : 100,
//                color : "#69D2E7"
//            }
//        ]
        var myNewChart = new Chart(ctx).Pie(reasonArr);
        var myNewChart = new Chart(ctx2).Pie(typeArr);
        highlight_subnav('{:U('Loss/index')}');
    </script>
</block>
